import './index.scss'
import {View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect} from 'react'
import Taro, {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import {contactUsStore} from './model'
import {imagesUrl} from '@/utils/baseUrl'
import MyNav from '@/components/nav'
import {CImg, IconImg} from '@/components/images'

const Contactus = () => {
  let router = useRouter()

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Contactus useEffect')
  })
  // 对应 onShow
  useDidShow(() => {
    console.log('Contactus useDidShow')
  })
  // 对应 onHide
  useDidHide(() => {
    console.log('Contactus useDidHide')
  })
  return (
    <View
      className="w-screen h-screen bg-x_bg relative flex flex-col"
      style={{
        backgroundImage: `url(${imagesUrl + 'contactUs-bg.png'})`,
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat'
      }}
    >
      {/* 自定义头部栏 */}
      <MyNav color="black" showBack={true}>
        <View className="text-x_text text-17">联系客服</View>
      </MyNav>
      <View className="px-19 overflow-hidden">
        <View className="w-full rounded-12 overflow-hidden mb-41 mt-24">
          <CImg imgName="contactUs-service" width={'100%'} height={380}></CImg>
        </View>

        <View className="w-full rounded-12 overflow-hidden mb-59">
          <View className="flex items-start gap-x-7 mb-29">
            <View className="flex items-center justify-start gap-x-6">
              <IconImg imgName="service-phone"></IconImg>
              <View className="hanzi text-x_text text-16 font-bold">
                客服电话：
              </View>
            </View>
            <View className="flex flex-col items-center justify-start gap-y-10">
              <View className="w-full text-primary text-16 font-bold">
                0571-88087777
              </View>
              <View className="w-full text-primary text-16 font-bold">
                13588275199
              </View>
            </View>
          </View>

          <View className="flex items-start gap-x-7">
            <View className="flex items-center justify-start gap-x-6">
              <IconImg imgName="service-workTime"></IconImg>
              <View className="hanzi text-x_text text-16 font-bold">
                工作时段：
              </View>
            </View>
            <View className="flex flex-col items-center justify-start gap-y-10">
              <View className="w-full text-x_text text-16 font-bold">
                周一至周五 08:30-17:30
              </View>
              <View className="w-full text-x_text text-16 font-bold">
                周六 9:00-17:00
              </View>
            </View>
          </View>
        </View>

        <View className="mt-59 hanzi text-x_text text-20 font-bold text-center">
          竭诚为您服务，您的满意，我的心意
        </View>
      </View>
    </View>
  )
}
export default observer(Contactus)
